﻿{% extends 'base.html' %}

{% block body %}
    <div id="parallax"><!-- Parallax Area -->

        <!-- Banner Area -->
        <section class="pages_banner_area">
            <img src="../static/images/parallax-layer/banner-layer-3.png" alt="" class="layer layer_1"
                 data-depth="0.10">
            <div class="container">
                <h2>今日概况</h2>
                <ol class="breadcrumb">
                    <li><a href={{ url_for('index') }}>首页</a></li>
                    <li><a href={{ url_for('today') }} class="active">今日概况</a></li>
                </ol>
            </div>
        </section>
        <!-- End Banner Area -->

        {#        <div class="container">#}
        {#            <form method='GET' action='/'>#}
        {#                <!-- Main component for a primary marketing message or call to action -->#}
        {#                {{ map1_charts|safe }}#}
        {#        </div> <!-- /container -->#}

        {#                <!-- Map Area -->#}
        {#                <section class="pricing_area pa_3">#}
        {#                    <div class="container">#}
        {#                        <h2 class="tittle">世界概览</h2>#}
        {#                        <div class="row" style="margin: 0 auto;">#}
        {#                            <form method='GET' action='/'>#}
        {#                                <!-- Main component for a primary marketing message or call to action -->#}
        {#                                {{ map1_charts|safe }}#}
        {#                        </div>#}
        {#                        <p style="margin-bottom: 5%">Ntegrate the latest technologies with an innovative platform that’s always#}
        {#                            getting better and#}
        {#                            launching new features weekly</p>#}
        {#                                        <div class="row" style="margin: 0 auto;">#}
        {#                                            <form method='GET' action='/'>#}
        {#                                                <!-- Main component for a primary marketing message or call to action -->#}
        {#                                                {{ map2_charts|safe }}#}
        {#                                        </div>#}
        {#                        <p>Ntegrate the latest technologies with an innovative platform that’s always getting better and#}
        {#                            launching new features weekly</p>#}
        {#                    </div>#}
        {#                </section>#}
        {#                <!-- End Map Area -->#}

        <!-- Map Area -->
        <section class="pricing_area pa_3">
            <div class="container">
                <h2 class="tittle">世界概览</h2>
                <div class="row" style="margin: 0 auto;">
                    <div class="pricing_content" style="margin: 0 auto; padding-bottom: 8%">
                        <ol class="pricing_button">
                            <li data-target=".pricing_slide" data-slide-to="0" class="active">
                                <a class="theme_btn" href="">发病率</a>
                            </li>
                            <li data-target=".pricing_slide" data-slide-to="1">
                                <a class="theme_btn active" href="">死亡率</a>
                            </li>
                        </ol>
                    </div>
                    <div class="carousel slide pricing_slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="row" style="margin: 0 auto;">
                                    <form method='GET' action='/'>
                                        <!-- Main component for a primary marketing message or call to action -->
                                        {{ map1_charts|safe }}
                                    </form>
                                </div>
                                <p style="margin-bottom: 5%">将在2020年收集到的数据利用地图进行可视化，我们可以看到世界上经济较发达的地区癌症发病的
                                    案例数都较多。其中中国、美国和印度是世界上发病案例数最多的三个国家，其次是日本、俄罗斯与巴西。同时，我
                                们可以看到颜色较深的区域通常遍布在美洲、亚洲与大洋洲。</p>
                            </div>
                            <div class="carousel-item">
                                <div class="row" style="margin: 0 auto;">
                                    <form method='GET' action='/'>
                                        <!-- Main component for a primary marketing message or call to action -->
                                        {{ map2_charts|safe }}
                                    </form>
                                </div>
                                <p>再来看每个国家的因癌症死亡的案例数量，同样利用地图进行可视化。在其中，我们可以每个区域的颜色深度与先前的
                                    发病案例数量地图比较一致。在世界中，拥有最多癌症死亡案例数量的国家是中国、美国与印度。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Map Area -->

        <!-- Stack-bar Area -->
        <section class="pricing_area pa_3" style="margin-top: -10%">
            <div class="container">
                <h2 class="tittle">详情探讨</h2>
                <div class="row" style="margin: 0 auto;">
                    <form method='GET' action='/'>
                        <!-- Main component for a primary marketing message or call to action -->
                        {{ bar_charts|safe }}
                    </form>
                </div>
                <p style="margin-bottom: 10%">利用收集到的数据，从中提取了患病人数最多的十种癌症，它们分别是乳腺癌、肺癌、结直肠癌、前列腺癌、胃癌、肝癌、
                宫颈癌、食道癌、甲状腺癌和膀胱癌。其中，发病人数最多的癌症种类是乳腺癌，而死亡病例最多的癌症种类是肺癌。</p>
                <div class="row" style="margin: 0 auto;">
                    <form method='GET' action='/'>
                        <!-- Main component for a primary marketing message or call to action -->
                        {{ bar1_charts|safe }}
                    </form>
                </div>
                <p style="margin-bottom: 10%">再从全球患癌女性的数据来看，女性中患癌率最高的是乳腺癌，最低的是间皮瘤。而死亡率最高的是乳腺癌，最低的是卡波西肉瘤。
                从中我们可以得知，被成为“粉红杀手”的乳腺癌是女性健康的首要威胁，女性皆需做好对乳腺癌发生的预防措施。但若已换上乳腺癌也不必担心，
                乳腺癌已成为疗效最佳的实体肿瘤之一，只要早发现早治疗，乳腺癌也并不如传闻中那样闻风丧胆。</p>
                <div class="row" style="margin: 0 auto;">
                    <form method='GET' action='/'>
                        <!-- Main component for a primary marketing message or call to action -->
                        {{ bar2_charts|safe }}
                    </form>
                </div>
                <p>而男性这边，患癌率最高的癌症则是肺癌，其次是前列腺癌与结直肠癌。死亡率最高的癌症种类也是肺癌，而排名第二、第三的则是肝癌与结直肠癌。
                肺癌作为对人群健康和生命威胁最大的恶性肿瘤之一，不但在男性群体间发病率高，在女性群体中的发病率也仅次于第一的乳腺癌。肺癌的病因至今
                    尚不完全明确，大量资料表明，长期大量吸烟与肺癌的发生有非常密切的关系。同时，也与城市大气污染和烟尘中含有致癌物质有关。</p>
            </div>
        </section>
        <!-- End Stack-bar Area -->

        <!-- Feature Work Area -->
        <section class="feature_work_area fwa_2 fwa_3">
            <img src="../static/images/parallax-layer/feature-work-bg.png" alt="" class="layer layer_1"
                 data-depth="0.20">
            <div class="container">
                <h2 class="tittle">接下来</h2>
                <div class="row">
                    <div class="col-lg-6 feature_img wow fadeInLeft">
                        <img src="../static/images/fetures_bg.png" alt="" class="fetures_bg layer" data-depth="0.10">
                        <img src="../static/images/computer_doctor_woman.png" alt="">
                    </div>
                    <div class="col-lg-6 feature_content wow fadeInRight">
                        <h2>过往调查</h2>
                        <p>根据60个国家的高质量数据，呈现半个多世纪以来癌症发病率和死亡率的时间趋势。</p>
                        <div style="display: flex;flex-direction: row">
                            <a href={{ url_for('overtime') }} class="theme_btn">下一项</a>
                            <a href={{ url_for('index') }} class="theme_btn" style="margin-left: 10%">回到首页</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Feature Work Area -->

    </div><!-- End Parallax -->
{% endblock %}
